import 'dart:ui';

import 'package:curved_navigation_bar/curved_navigation_bar.dart';
import 'package:flutter/material.dart';
import 'package:flutter_demo2/material-demo/responsive_demo/app_ui_panel/app_bar/app_bar_widget.dart';
import 'package:flutter_demo2/material-demo/responsive_demo/app_ui_panel/constants.dart';
import 'package:flutter_demo2/material-demo/responsive_demo/app_ui_panel/drawer_page.dart';
import 'package:flutter_demo2/material-demo/responsive_demo/app_ui_panel/panel_center/panel_center_page.dart';
import 'package:flutter_demo2/material-demo/responsive_demo/app_ui_panel/panel_left/panel_left_page.dart';
import 'package:flutter_demo2/material-demo/responsive_demo/app_ui_panel/panel_right/panel_right_page.dart';
import 'package:flutter_demo2/material-demo/responsive_demo/app_ui_panel/responsive_layout.dart';

class WidgetTree extends StatefulWidget {
  const WidgetTree({Key? key}) : super(key: key);

  @override
  State<WidgetTree> createState() => _WidgetTreeState();
}

class _WidgetTreeState extends State<WidgetTree> {
  int currentIndex = 1;
  late PageController _pageController;
  List<Widget> icons = [
    Icon(Icons.add, size: 30),
    Icon(Icons.list, size: 30),
    Icon(Icons.compare_arrows, size: 30),
  ];

  @override
  void initState() {
    super.initState();
    _pageController = PageController(
        initialPage: currentIndex, keepPage: true, viewportFraction: 1.0);
  }

  @override
  void dispose() {
    super.dispose();
    _pageController.dispose();
  }

  List<Widget> pageList = [
    PanelLeftPage(),
    PanelCenterPage(),
    PanelRightPage(),
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: PreferredSize(
        preferredSize: Size(double.infinity, 100),
        child: (ResponsiveLayout.isTinyLimit(context) ||
                ResponsiveLayout.isTinyHeightLimit(context)
            ? Container()
            : AppBarWidget()),
      ),
      body: ResponsiveLayout(
        tiny: Text('tiny'),
        phone: PageView.builder(
          controller: _pageController,
          onPageChanged: (int index) {
            setState(() {
              currentIndex = index;
            });
          },
          scrollBehavior: AppScrollBehavior(),
          itemCount: icons.length,
          itemBuilder: (BuildContext context, int index) {
            return pageList[index];
          },
        ),
        tablet: Row(
          children: [
            Expanded(child: PanelLeftPage()),
            Expanded(child: PanelCenterPage()),
          ],
        ),
        largeTablet: Row(
          children: [
            Expanded(child: PanelLeftPage()),
            Expanded(child: PanelCenterPage()),
            Expanded(child: PanelRightPage()),
          ],
        ),
        computer: Row(
          children: [
            Expanded(child: DrawerPage()),
            Expanded(child: PanelLeftPage()),
            Expanded(child: PanelCenterPage()),
            Expanded(child: PanelRightPage()),
          ],
        ),
      ),
      drawer: DrawerPage(),
      drawerEnableOpenDragGesture:
          ResponsiveLayout.isComputer(context) ? false : true,
      bottomNavigationBar: ResponsiveLayout.isPhone(context)
          ? CurvedNavigationBar(
              index: currentIndex,
              backgroundColor: Constants.purpleDark,
              items: icons,
              onTap: (index) {
                setState(() {
                  currentIndex = index;
                });
                _pageController.animateToPage(index,
                    duration: Duration(milliseconds: 300), curve: Curves.ease);
              },
            )
          : SizedBox(),
    );
  }
}

class AppScrollBehavior extends MaterialScrollBehavior {
  @override
  Set<PointerDeviceKind> get dragDevices => {
        PointerDeviceKind.touch,
        PointerDeviceKind.mouse,
      };
}
